<style lang="less" scoped>
.meau{
	width: 100%;
	overflow: hidden;
	.box{
		width: 100%;
		overflow: hidden;
		position: relative;
		padding-bottom:25%;
		.bj{
			width: 100%;
			position: absolute;
			opacity: 0.9;
			img{
				width: 100%;
			}
		}
		.container{
			width: 90%;
			margin: 0 auto;
			text-align: center;
			position: relative;
			z-index: 600;
			transition: all 0.6s;
			.title{
				margin-top: 150px;
				font-size: 24px;
				color: #fefefe;
			}
			.aside{
				color:#fefefe;
				margin-top: 5px;
			}
			.text{
				color: #fefefe;
				font-size: 12px;
				margin-top: 5px;
			}
			.iconRow{
				margin-top: 15px;
				display: flex;
				justify-content: space-between;
				.icon1{
					width: 31%;
					height: 34px;
					background-color: rgba(204, 204, 204,.8);
					border-radius: 20px;
					position: relative;
					line-height: 35px;
					// margin-right: 10%;
					padding-right: 15%;
					span{
						position: absolute;
						top:0px;
						left:45%;
						color:#fefefe;
						
					}
				}
			}
			
		}
	}
}

</style>
<template>
	<view class="meau" @touchmove="getScrollY">
		<div class="loading" v-if="isLoading" style="position: absolute; top: 40%;left:30%;">
			<loading></loading>
		</div>
		<meau-top :obj="meauDetail" :style="scrollY>=265?`background-color: rgba(255, 255, 255, 0.1);`:``,`transition:all 0.6s`"></meau-top>
		<div class="box">
			<div class="bj">
				<img :src="`${this.meauDetail.ImgUrl}`" alt="" />
			</div>
			<div class="container" :style="scrollY>=265?`opacity: 0;`:``">
				<div class="title">
					<h3>{{meauDetail.name}}</h3>
				</div>
				<div class="aside">
					<span>- 每日更新 -</span>
				</div>
				<div class="text">
					<span>{{text(meauDetail.description)}}</span>
				</div>
				<div class="iconRow">
					<div class="icon1">
						<uni-icons type="undo-filled" size="26" color="#fefefe"></uni-icons>
						<span>{{ fromatext(meauDetail.shareCount) }}</span>
					</div>
					<div class="icon1">
						<uni-icons type="chat-filled" size="26" color="#fefefe"></uni-icons>
						<span>{{  fromatext(meauDetail.commentCount) }}</span>
					</div>
					<div class="icon1">
						<uni-icons type="folder-add-filled" size="26" color="#fefefe"></uni-icons>
						<span>{{  fromatext(meauDetail.subscribedCount)}}</span>
					</div>
				</div>
			</div>
		</div>
		<meau-list :id='id' :scrollY='scrollY' @dataSent="handleData"></meau-list>
	</view>
</template>

<script>
	import meauTop from '../../components/meauTop.vue';
	import meauList from '../../components/meauList.vue';
	import { getMeauDetail } from '../../api/request';
	import loading from '../../components/loading.vue';
	export default {
		components:{
			meauTop,
			meauList,
			loading,
		},
		data() {
			return {
				meauDetail:{},
				id:'',
				scrollY:0,
				isScroll:true,
				isLoading:false,
			};
		},
		async onLoad(options){
			await this.getData(options)
			await this.getMeauDetailFn(this.id)
		},
		methods:{
			async getData(options){
				this.isLoading=true
				this.id=options.id
			},
			async getMeauDetailFn(id){
				await getMeauDetail({id})
					.then(
					(data)=>{
						let { code , playlist }=data
						let obj = {};
						if(code==200){
							obj.name=playlist.name;
							obj.ImgUrl=playlist.coverImgUrl;
							obj.description=playlist.description;
							obj.UpdateTime=playlist.trackUpdateTime;
							obj.subscribedCount=playlist.subscribedCount;
							obj.commentCount=playlist.commentCount;
							obj.shareCount=playlist.shareCount
						}
						this.meauDetail=obj
						// console.log(this.meauDetail)
					})
					this.isLoading=false
			},
			fromatext(value){
				let num=0
				if (value > 10000 && value < 100000) {
					num=Math.floor(value/10000) +Math.floor(value/1000)%10/10+'万'
					return num
				} else if (value >= 100000) {
					num=Math.floor(value/10000)+'万'
					return num
				} else {
					return value
				}
			},
			text(value){
				let text =''
				if(value.length>28){
					text=value.substring(0,26)+'...'
				}else{
					text=value
				}
				return text
			},
			getScrollY(e){
				let y= window.pageYOffset
				this.scrollY=y
				// console.log(y)
			},
			 handleData(data) {
				this.isScroll=data
				console.log(data)
				if(!data){
					document.body.style.overflow='hidden'
				}else{
					document.body.style.overflow='visible'
				}
			}
		},
		
	}
</script>


